#{extends 'main.html' /}
#{set title:'Home' /}
<style type="text/css">
    label, input, select, textarea {
        display: compact;
        width: 180px;
        float: left;
        margin-bottom: 1em;
    }

    select {
        width: 185px;
    }

    label {
        text-align: left;
        width: 100px;
        padding-right: 2em;
    }

    .clear {
      clear: both;
    }
  </style>

<link href="@{'/public/css/main.css'}" rel="stylesheet" type="text/css" />
<link href="@{'/public/css/tables.css'}" rel="stylesheet" type="text/css" />

#{script 'jquery-ui-1.7.2.custom.min.js' /}
#{set 'moreScripts'}
<script src="@{'/public/javascripts/jquery.ui.timepicker.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery.ui.widget.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery.ui.core.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery.ui.position.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery.ui.tabs.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>


<script>
	$(function() {
		$( "#datep" ).datepicker();
		$('#timepicker').timepicker({
		    // Options
		    timeSeparator: ':',           // The character to use to separate hours and minutes. (default: ':')
		    showLeadingZero: true,        // Define whether or not to show a leading zero for hours < 10.
		                                    // (default: true)
		    showMinutesLeadingZero: true, // Define whether or not to show a leading zero for minutes < 10.
		                                   //  (default: true)
		    showPeriod: false,            // Define whether or not to show AM/PM with selected time. (default: false)
		    showPeriodLabels: true,       // Define if the AM/PM labels on the left are displayed. (default: true)
		    periodSeparator: ' ',         // The character to use to separate the time from the time period.
		    altField: '#alternate_input', // Define an alternate input to parse selected time to
		    defaultTime: '12:34',         // Used as default time when input field is empty or for inline timePicker
		                                  // (set to 'now' for the current time, '' for no highlighted time,
		                                   //  default value: now)

		    // trigger options
		    showOn: 'focus',              // Define when the timepicker is shown.
		                                  // 'focus': when the input gets focus, 'button' when the button trigger element is clicked,
		                                  // 'both': when the input gets focus and when the button is clicked.
		    button: null,                 // jQuery selector that acts as button trigger. ex: '#trigger_button'

		    // Localization
		    hourText: 'Hour',             // Define the locale text for "Hours"
		    minuteText: 'Minute',         // Define the locale text for "Minute"
		    amPmText: ['AM', 'PM'],       // Define the locale text for periods

		    // Position
		    myPosition: 'left top',       // Corner of the dialog to position, used with the jQuery UI Position utility if present.
		    atPosition: 'left bottom',    // Corner of the input to position

		 /*    // Events
		    beforeShow: beforeShowCallback, // Callback function executed before the timepicker is rendered and displayed.
		    onSelect: onSelectCallback,   // Define a callback function when an hour / minutes is selected.
		    onClose: onCloseCallback,     // Define a callback function when the timepicker is closed.
		    onHourShow: onHourShow,       // Define a callback to enable / disable certain hours. ex: function onHourShow(hour)
		    onMinuteShow: onMinuteShow,   // Define a callback to enable / disable certain minutes. ex: function onMinuteShow(hour, minute)
		 */
		    // custom hours and minutes
		    hours: {
		        starts: 0,                // First displayed hour
		        ends: 23                  // Last displayed hour
		    },
		    minutes: {
		        starts: 0,                // First displayed minute
		        ends: 55,                 // Last displayed minute
		        interval: 5               // Interval of displayed minutes
		    },
		    rows: 4,                      // Number of rows for the input tables, minimum 2, makes more sense if you use multiple of 2
		    showHours: true,              // Define if the hours section is displayed or not. Set to false to get a minute only dialog
		    showMinutes: true,            // Define if the minutes section is displayed or not. Set to false to get an hour only dialog

		    // buttons
		    showCloseButton: false,       // shows an OK button to confirm the edit
		    closeButtonText: 'Done',      // Text for the confirmation button (ok button)
		    showNowButton: false,         // Shows the 'now' button
		    nowButtonText: 'Now',         // Text for the now button
		    showDeselectButton: false,    // Shows the deselect time button
		    deselectButtonText: 'Deselect' // Text for the deselect button

		});
	});	
	
	function changetextbox() {
	    var selMenu = document.getElementById('regularity');
	    var txtField1 = document.getElementById('datep');
	    var txtField2 = document.getElementById('timepicker');
	    if(selMenu.value == '2'){
	        txtField1.disabled = true
	        txtField2.disabled = true
	    }
	    
	    else {
	    	txtField1.disabled = false
	        txtField2.disabled = false
	    } 
	}
</script>
    
   
#{/set}

#{set 'moreStyles'}
    <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/ui-lightness/jquery-ui-1.7.2.custom.css'}" />
    <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/jquery.ui.timepicker.css'}" />
#{/set}

#{if flash.error}
    <p style="color:#c00">
        ${flash.error}
    </p>
#{/if}

<form action="@{Rides.bookRide()}" method="GET">
    <h2>Register a Ride:</h2>
	<fieldset style="width: 93%;">
        <label style="margin-top: 10px">Type of ride*</label>
        <select style="margin-top: 10px" name="regularity" id="regularity" onChange="changetextbox()">
            <option value="0">One time</option>
            <option value="1">Multiple times</option>
            <option value="2">Weekly</option>
        </select>
		<br class="clear" />
        <label>Name of driver</label>
        <input type="text" name="nameOfDriver" value="${username}" readonly="readonly">
		<br class="clear" />
        <label>Start point</label>
        <input name="startPoint">
        <br class="clear" />
        <label>Destination University</label>
        <select name="destinationCampusId">
			<optgroup label="TUM">
				<option value="1">Garching</option>
				<option value="2">Stammgaelende</option>
			</optgroup>
			<optgroup label="LMU">
				<option value="3">City center</option>
			</optgroup>
		</select>
		<br class="clear" />
            <label>Date </label><input type="text" name="datep" id="datep" class="datepicker"> 
            <br class="clear" />
            <label>Time </label><input type="text" size="10" name ="timepicker" id="timepicker" class="timepicker">
            <br class="clear" />
            
        <label>Number of seats</label>
        <select name="numOfSeatsAvailable">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
        </select>
        <br class="clear" />
         <label>Comments</label>
        	<textarea  style="height:200px;" name="comments" > </textarea>
        <br class="clear" />
        
        <p align="right" style="margin-right: 20px;">*(Weekly automatically includes your timetable!)</p>
    </fieldset>
    <br>
	<input type="submit" style="width:80px;" name="offer" value="Create">
</form> 
<br class="clear" />


